<template>
  <div class="app-container">
    <el-card>
      <el-form inline size="small" ref="searchForm" :model="searchForm">
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model="searchForm.operName" placeholder="请输入操作人" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.businessType" placeholder="请选择操作类型" clearable>
            <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间：" prop="beginTime">
          <el-date-picker style="width: 200px" v-model="searchForm.beginTime" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker style="width: 200px" v-model="searchForm.endTime" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="handleSearchList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.data" border style="width: 100%" size="small">
        <el-table-column prop="operId" label="日志编号" align="center"></el-table-column>
        <el-table-column prop="title" label="系统模块" align="center"></el-table-column>
        <el-table-column label="操作类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.businessType | businessTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="operName" label="操作人员" align="center"></el-table-column>
        <el-table-column prop="operIp" label="主机" align="center"></el-table-column>
        <el-table-column prop="operLocation" label="操作地点" align="center"></el-table-column>
        <el-table-column label="操作状态" align="center">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.status == 0 ? 'success' : 'danger'" disable-transitions>{{
              scope.row.status == "0" ? "成功" : "失败" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operTime" label="操作时间" align="center"></el-table-column>
        <el-table-column label="消耗时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.costTime }} 毫秒
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pageRight" background layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]" :page-size="searchForm.pageSize" :total="tableData.total"
        @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </el-card>

    <el-dialog :visible.sync="dialogFormVisible" title="日志详情">
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块：">{{ form.title }}</el-form-item>
            <el-form-item label="登录信息：">{{ form.operName }} / {{ form.operIp }} /
              {{ form.operLocation }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{
              form.requestMethod
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">
              <json-viewer copyable theme="my-json-viewer-" :value="form.operParam" :expand-depth="2" boxed
                sort></json-viewer>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">
              <json-viewer copyable theme="my-awesome-json-theme" :value="form.jsonResult" :expand-depth="5" boxed
                sort></json-viewer>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间：">{{ form.operTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{
              form.errorMsg
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
import { getRegionList, getRegionDetail } from "@/api/system/errlog";
export default {
  components: {
    JsonViewer
  },
  filters: {
    businessTypeFilter(type) {
      const mapObj = {
        0: "其他",
        1: "新增",
        2: "修改",
        3: "删除",
        4: "授权",
        5: "导出",
        6: "导入",
        7: "强退",
        8: "生成代码",
        9: "清空数据",
        10: "爬虫"
      };
      return mapObj[type];
    }
  },
  data() {
    return {
      tableData: {
        data: [],
        total: 0
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        title: "",
        operName: "",
        businessType: "", //操作类型（0其它 1新增 2修改 3删除）≠≠≠
        status: ""
      },
      listLoading: false,
      dialogFormVisible: false,
      searchTime: [],
      statusOptions: [
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "失败"
        }
      ],
      businessTypeOptions: [
        {
          value: 0,
          label: "其他"
        },
        {
          value: 1,
          label: "新增"
        },
        {
          value: 2,
          label: "修改"
        },
        {
          value: 3,
          label: "删除"
        },
        {
          value: 10,
          label: "爬虫"
        }
      ],
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSearchList() {
      this.searchForm.pageNum = 1;
      this.$authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    handleDetail(row) {
      getRegionDetail(row.operId).then(res => {
        this.dialogFormVisible = true;
        if (res.data.jsonResult) {
          res.data.jsonResult = JSON.parse(res.data.jsonResult);
        }
        if (res.data.operParam) {
          res.data.operParam = JSON.parse(res.data.operParam);
        }
        this.form = res.data;
      });
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        title: "",
        operName: "",
        businessType: "", //操作类型（0其它 1新增 2修改 3删除）≠≠≠
        status: ""
      };
      this.searchTime = [];
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getRegionList(this.searchForm).then(res => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style></style>
